<!--
 * @Author: xuman
 * @Date: 2020-05-27 14:44:56
 * @LastEditors: xuman
 * @LastEditTime: 2020-06-28 11:22:19
-->
<template>
  <el-dialog
    title="引用详情"
    :close-on-click-modal="false"
    :modal-append-to-body="false"
    :visible="true"
    width="60%"
    :before-close="handleClose"
    class="quote"
  >
    <div class="quote_item" v-for="(item, index) in quoteList" :key="index">
      <p class="quote_item_label">{{ item.label }}:</p>
      <p class="quote_item_value">
        <span v-if="index !== 2">{{ item.value }}</span>
        <el-table v-else :data="data">
          <el-table-column
            label="项目"
            min-width="130px"
            prop="projectName"
            align="center"
          />
          <el-table-column
            label="文件路径"
            min-width="130px"
            prop="path"
            align="center"
          />
          <el-table-column
            label="文件类型"
            min-width="130px"
            prop="type"
            align="center"
          />
        </el-table>
      </p>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button size="mini" @click="handleClose">取消</el-button>
      <el-button size="mini" type="primary" @click="handleSure">
        确定
      </el-button>
    </div>
  </el-dialog>
</template>
<script lang="ts">
import { Component, Vue, Prop } from 'vue-property-decorator'
import * as Api from '@/api/risksystem/feature/dmp'
import { cloneDeep, debounce } from 'lodash'

const getQuoteList = (data: any) => [
  {
    label: '模型CODE',
    value: data.modelCode
  },
  {
    label: '模型名称',
    value: data.modelName
  },
  {
    label: '引用情况'
  }
]

interface IQuoteData {
  projectName: string
  type: string
  path: string
}

@Component({})
export default class QuoteDetail extends Vue {
  @Prop() private row!: any

  private quoteList: any[] = []
  private data: IQuoteData[] = []

  created() {
    this.quoteList = getQuoteList(this.row)
    this.getModelQuote()
  }

  private async getModelQuote() {
    const { modelCode } = this.row
    const { data } = await Api.getModelQuote({ modelCode })
    let quoteData: IQuoteData[] = []
    for (let key in data) {
      const arrList = data[key].map((item: IQuoteData) => ({
        projectName: key,
        path: item.path,
        type: item.type
      }))
      quoteData = [...quoteData, ...arrList]
    }
    this.data = quoteData
  }

  // 确定
  private handleSure() {}

  // 关闭弹窗
  private handleClose() {
    this.$emit('handleClose')
  }
}
</script>
<style lang="scss" scoped>
.quote {
  &_item {
    margin-bottom: 20px;
    display: flex;
    overflow: hidden;
    &_label {
      width: 120px;
      text-align: right;
      margin-right: 16px;
      color: #000;
    }
    &_value {
      flex: 1;
      overflow: hidden;
    }
  }
}
</style>
